import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button } from 'antd'
import echarts from 'echarts'
import { mapColor } from 'lib/fun'

const option = {
    tooltip: {
        trigger: 'axis'
    },
    color: mapColor(),
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: ['1940年', '1941年', '1942年', '1943年', '1944年', '1945年', '1946年'],
        axisLine: {
          lineStyle: {
            color: '#d9d9d9'
          }
        }
    }],
    yAxis: [{
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#d9d9d9'
          }
        }
    }],
    series: [{
        name: '覆盖人次',
        type: 'line',
        // color: '#0f87dd',
        label: {
            normal: {
                show: true,
                position: 'top',
                // textStyle: {
                //   color: '#0f87dd',
                // }
            }
        },
        // lineStyle: {
        //     normal: {
        //       color: '#0f87dd',
        //     }
        // },
        areaStyle: {
            normal: {
              // color: '#0f87dd',
            }
        },
        data: [220, 182, 300, 234, 100, 330, 310]
    },{
        name: '覆盖人数',
        type: 'line',
        label: {
            normal: {
                show: true,
                position: 'bottom'
            }
        },
        areaStyle: {
            normal: {
              // color: '#0f87dd',
            }
        },
        data: [120, 100, 101, 134, 90, 230, 210]
    }]
};

class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  componentDidMount(){
  	this.chart = echarts.init(document.getElementsByClassName('area-map')[0]);
    this.chart.setOption(option);
    window.addEventListener('resize', this.handleResize); 
  }

  handleResize = (e)=>{
    this.chart.resize();
  }
  
  componentWillUnmount() {  
    window.removeEventListener('resize', this.handleResize);  
  }

  componentWillReceiveProps(nextProps){
    if(nextProps.common.user&&nextProps.common.user.user&&this.state.treeData.length == 0){
      this.loadArea(nextProps.common.user.user.areaId);
    }
  }

  fun = () => {
    
  }
  
  render() {

    return (
      <Spin spinning={this.state.loading}>
    	  <div className="area-map" style={{height: 300}}></div>
      </Spin>
    )
  }
}

module.exports = ModuleName
